<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分支结构</title>
		
	</head>
	<body>
		<div id="app"> 
	    <!-- v-for 遍历展现的标签-->
		<h1>循环遍历结构</h1>
		<p v-for=" item in hobby">{{item}}</p>
		<p v-for=" item in hobby" v-text="item"></p>
		<h1>遍历对象</h1>
		<div v-for="(value,key,index) in user">
		<span>{{value}}-----{{key}}----{{index}}</span>
		</div>
		<hr />
		<h1>遍历集合</h1>
		<!-- 约定：key用来遍历的区分节点信息 -->
		<div v-for="user in userList" :key="user.id">
			<p>ID编号：{{user.id}}</p>
			<p>名称：{{user.name}}</p>
		</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el:'#app',
				data: {
				    hobby: ['电脑','手机','平板'],
					user: {
						id: 100,
						name: 'tomcat猫'
					},
					userList: [{id:100,name:'tom1'},{id:100,name:'tom2'},{id:100,name:'tom3'}]
				},
				//定义vue对象中的方法
				methods: {
					
				}
			})
		</script>
		
	</body>
</html>